<template>
  <!-- 底部 -->
  <footer>
    <div class="footer-box">
      <div class="container">
        <div class="footer-top">
          <div class="slogan-box">
            <div class="slogan"><i class="el-icon-present"></i></div>
            <span>价格亲民</span>
          </div>
          <div class="slogan-box">
            <div class="slogan"><i class="el-icon-time"></i></div>
            <span>物流快捷</span>
          </div>
          <div class="slogan-box">
            <div class="slogan"><i class="el-icon-medal-1"></i></div>
            <span>品质新鲜</span>
          </div>
        </div>
        <div class="footer-bottom">
          <span
            >关于我们 | 帮助中心 | 售后服务 | 配送与验收 | 商务合作 | 搜索推荐 |
            友情链接</span
          >
          <p>CopyRight © 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
.container{
  width: 1240px;
  margin: 0 auto;
}
.footer-box {
    height: 348px;
    background-color: #333333;
}

.footer-box .container {
    display: flex;
    flex-direction: column;
}

.footer-box .footer-top {
    display: flex;
    color: #FFFFFF;
    font-size: 28px;
    height: 178px;
    align-items: center;
    border-bottom: 1px solid #999999;
}

.footer-box .footer-top .slogan-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer-box .footer-top .slogan-box .slogan {
    width: 60px;
    height: 60px;
    border: 3px solid #FFFFFF;
    border-radius: 50px;
    margin-right: 15px;
    text-align: center;
    line-height: 60px;
}
.slogan i{
  font-size: 40px;
}
.footer-box .footer-top .slogan-box span{
    display: inline-block;
    line-height: 50px;
}
.footer-box .footer-bottom {
    color: #999999;
    text-align: center;
    padding: 40px 0 0;
    font-size: 15px;
}
.footer-box .footer-bottom span{
    display: inline-block;
    padding-bottom: 13px;
}
</style>